﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作DOM-jQuery基础</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="res/css/bootstrap.min.css" rel="stylesheet"/>
<link href="res/css/zico.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>   
<script src="res/js/popper.min.js"></script>
<script src="res/js/bootstrap.min.js"></script>
<style>img{width:100%;}</style>
</head>
<body>
<div id="first" class="container-xl">
<h1 class="title">什么是编程词典？</h1>
<div class="zoomla none">所谓编程词典是由逐浪软件专业程序员设计的专业的编程工具，它由数据字典等工具构成，出自逐浪软件团队十余位高手专业精心写作。可以让开发者快速上手，是进行开发必不可少的工具，用户可在官网免费下载获取。</div>
</div>

<hr>
<div class="container-xl">
<input type="button"" id="button" name="button" value="普通按钮">
</div>

<hr>
<div class="container-xl">
<div class="a1">我国人民拥有热情<strong class="none">建设全新社会主新中国</strong></div>
<div class="a2 p-4">中华人民共和国站起来了，这里是显示的，但会通过事件来隐私它</div>
</div>

<hr>
<div class="container-xl">
<h1>模拟用户的操作触发事件</h1>
<a href="" class="btn lover1">直接添加事件的按钮</a>
<div class="div">
<a href="" class="btn lover2">用hover待加事件的按钮</a>
</div>
</div>

<div id="love3" class="container-xl">
<div class="row">
<div class="col"><img src="images/box.png"/></div>    
<div class="col"><img src="images/box2.png"/></div>    
<div class="col"><img src="images/box3.png"/></div>    
</div>
</div>

<div  class="container-xl love4">
<h2>菜单在下面</h2>
<div class="love5" style="display: none;">
<ul>
<li>一条目1</li>    
<li>一条目2</li>    
<li>一条目3</li>    
<li>一条目4</li>    
</ul>
</div>
</div>

<div id="love6" class="container-xl">
    <h2>从显示到不显示</h2>
    <div class="row">
    <div class="col"><img src="images/box.png"/></div>    
    <div class="col"><img src="images/box2.png"/></div>    
    <div class="col"><img src="images/box3.png"/></div>    
    </div>
    </div>

    


<script>
$(document).ready(function () {
    $(`#first h1`).bind(`click`,function () {
        $(this).next().show();
    }).one(`mouseover`,function () {
        $(this).append(`<p>我绑定了 mouseover 事件</p>`);
    })

    // 模拟按钮操作
    $(`input:button`).bind(`click`,function (event,msg1,msg2) {
       // alert(msg1+msg2);
    }).trigger(`click`,["欢迎访问:","逐浪软件官网www.z01.com"]);

    $(`.a1`).hover(function () {
        $(this).addClass("bg-info");
    })

    //直接添加class操作
    $(`.lover1`).addClass(`btn-info`);

    //添加hover事件
    $(`.lover2`).hover(function () {
        $(this).addClass(`bg-info`);
    },function () {
        $(this).removeClass(`bg-info`);
    });

    //隐藏动画
    $(`#love3`).hover(function () {
        $(this).hide(3000);
    })
    
    //控制菜单是否显示
    $(`.love4`).mouseover(function () {
        if ($(`.love5`).is(`:hidden`)) {
            $(`.love5`).show(300);
        }
    });
    $(`.love5`).hover(null,function () {
        $(`.love5`).hide(300);
    })

    //从显示到不显示
    $(`#love6 h2`).mouseover(function () {
        if ($(`#love6 img`).is(`:visible`)) {
            $(`#love6 img`).hide(300);
        }
        else{
        $(`#love6 img`).show(300);
        }
    });




})
</script>
</body>
</html>
